import React, { useState } from 'react'
import { Card, Button } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import TopNavbar from '../../components/TopNavbar'
import BottomNav from '../../components/BottomNav'
import styles from './index.module.css'

const Health = () => {
  const navigate = useNavigate()
  const [currentCategory, setCurrentCategory] = useState('health')

  // 分类标签
  const categories = [
    { key: 'tcm', name: '中医常识' },
    { key: 'health', name: '健康养生' },
    { key: 'prevention', name: '疾病预防' },
    { key: 'education', name: '出院宣教' },
    { key: 'recipes', name: '养生食谱' }
  ]

  // 健康资讯数据
  const healthArticles = [
    {
      id: 1,
      title: '世界糖尿病日,应该注意什么来调节?',
      category: 'health',
      tag: '#健康养生',
      likes: 520,
      views: 2000,
      image: '🩸'
    },
    {
      id: 2,
      title: '冬季养生小贴士：如何增强免疫力',
      category: 'health',
      tag: '#健康养生',
      likes: 456,
      views: 1800,
      image: '❄️'
    },
    {
      id: 3,
      title: '中医调理：春季养肝的正确方法',
      category: 'tcm',
      tag: '#中医常识',
      likes: 389,
      views: 1500,
      image: '🌸'
    },
    {
      id: 4,
      title: '预防感冒：这些食物要多吃',
      category: 'prevention',
      tag: '#疾病预防',
      likes: 678,
      views: 2200,
      image: '🍊'
    },
    {
      id: 5,
      title: '出院后康复训练指南',
      category: 'education',
      tag: '#出院宣教',
      likes: 234,
      views: 1200,
      image: '🏥'
    },
    {
      id: 6,
      title: '养生粥品：红枣枸杞粥的做法',
      category: 'recipes',
      tag: '#养生食谱',
      likes: 567,
      views: 1900,
      image: '🍲'
    },
    {
      id: 7,
      title: '高血压患者的饮食注意事项',
      category: 'prevention',
      tag: '#疾病预防',
      likes: 445,
      views: 1600,
      image: '💊'
    },
    {
      id: 8,
      title: '中医穴位按摩：缓解颈椎疼痛',
      category: 'tcm',
      tag: '#中医常识',
      likes: 789,
      views: 2800,
      image: '💆'
    }
  ]

  // 获取当前分类的文章
  const getCurrentArticles = () => {
    if (currentCategory === 'all') {
      return healthArticles
    }
    return healthArticles.filter(article => article.category === currentCategory)
  }

  return (
    <div className={styles.healthPage}>
      {/* 顶部导航 */}
      <TopNavbar
        title="健康资讯栏目"
        showBack={true}
        onBack={() => navigate(-1)}
        rightContent={
          <>
            <span>⋯</span>
            <span>◎</span>
          </>
        }
      />

      {/* 分类标签页 */}
      <div className={styles.categoryTabs}>
        <div className={styles.tabsContainer}>
          {categories.map(category => (
            <div
              key={category.key}
              className={`${styles.categoryTab} ${
                currentCategory === category.key ? styles.active : ''
              }`}
              onClick={() => setCurrentCategory(category.key)}
            >
              {category.name}
            </div>
          ))}
        </div>
      </div>

      {/* 文章列表 */}
      <div className={styles.articlesList}>
        {getCurrentArticles().map(article => (
          <Card key={article.id} className={styles.articleCard}>
            <div className={styles.articleContent}>
              <div className={styles.articleTitle}>
                {article.title}
              </div>
              <div className={styles.articleImage}>
                {article.image}
              </div>
            </div>
            <div className={styles.articleFooter}>
              <span className={styles.articleTag}>{article.tag}</span>
              <div className={styles.articleStats}>
                <span>👍 {article.likes}</span>
                <span>👁️ {article.views}</span>
              </div>
            </div>
          </Card>
        ))}
      </div>

      {/* 底部导航 */}
      <BottomNav />
    </div>
  )
}

export default Health
